<template>
    <div class="songs-container">
        <div class="tab-bar">
            <span class="item" :class="{ active: tag === 0 }" @click="tag = 0">全部</span>
            <span class="item" :class="{ active: tag === 7 }" @click="tag = 7">华语</span>
            <span class="item" :class="{ active: tag === 96 }" @click="tag = 96">欧美</span>
            <span class="item" :class="{ active: tag === 8 }" @click="tag = 8">日本</span>
            <span class="item" :class="{ active: tag === 16 }" @click="tag = 16">韩国</span>
        </div>
            <!-- 底部的table -->
        <table class="el-table playlit-table">
            <thead>
                <th></th>
                <th></th>
                <th>音乐标题</th>
                <th>歌手</th>
                <th>专辑</th>
                <th>时长</th>
            </thead>
            <tbody>
                <tr class="el-table__row" v-for="(item, index) in songs" :key="index">
                <td>{{ index + 1 }}</td>
                <td>
                    <div class="img-wrap" @click="play(item.id)">
                    <img :src="item.album.picUrl+'?param=130y130'" alt="" />
                    <span class="el-icon-video-play icon-play" @click="play(item.id)"></span>
                    </div>
                </td>
                <td>
                    <div class="song-wrap">
                    <div class="name-wrap">
                        <span>{{ item.name }}</span>
                        <span v-if="item.mvid !== 0" class="el-icon-video-play icon-mv" @click="toMv(item.mvid)"></span>
                    </div>
                    </div>
                </td>
                <td>{{ item.album.artists[0].name }}</td>
                <td>{{ item.album.name }}</td>
                <td>{{ item.duration }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import { playMusic } from '../api/index'
import { topSongs } from '../api/songs'
export default {
    data(){
        return{
            tag:0,
            songs:[],
            // 歌曲列表
            lists:[]
        }
    },
    created(){
      this.getSong()
    },
    methods:{
        getSong(){
            topSongs({
                type:this.tag
            }).then(res => {
                console.log(res)
                this.songs = res.data
            //    处理时长 毫秒  转为 分秒
            for(let i = 0;i<this.songs.length;i++){
                // 获取总毫秒数
                let duration = this.songs[i].duration
                // 假设  455600 毫秒
                // 秒  455600/1000
                // 分 455 / 60
                // 秒 455 % 60
                let min = parseInt(duration / 1000 / 60)
                if(min < 10) {
                    min = '0' + min
                }
                let sec = parseInt((duration / 1000) % 60)
                if(sec < 10) {
                    sec = '0' + sec
                }
                this.songs[i].duration = `${min}:${sec}`
            }
            })
        },
        play(id){
            playMusic({
                id
            }).then(res => {
                 let url = res.data[0].url
            // 设置给父组件的播放地址
                 this.$parent.musicUrl = url
            })
        },
        // 跳转视频详情页
        toMv(id){
         this.$router.push(`/mv?q=${id}`)
       },
    }, 
    watch:{
        tag(){
            this.getSong()
        }
    }
}
</script>

<style lang="scss" scoped>
.songs-container {
    .tab-bar {
        display: flex;
        justify-content: flex-end;
        .item {
            font-size: 15px;
            color: gray;
            margin-right: 20px;
            cursor: pointer;
            &.active {
                color: #dd6d60;
            }
        }
    }
    .song-table {
        .song-wrap {
            & > span {
                margin-top: 20px;
                display: inline-block;
                color: #bebebe;
            }
            .icon-mv {
                padding-left: 5px;
                cursor: pointer;
                color: #dd6d60;
            }
        }
        .img-wrap {
            position: relative;
            cursor: pointer;
            width: 70px;
            height: 70px;
            img {
                width: 70px;
                height: 70px;
                border-radius: 5px;
            }
            .icon-play {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 25px;
                height: 25px;
                color: #dd6d60;
                font-size: 12px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.8);
                &::before {
                    transform: translateX(1px);
                }
            }
        }
    }
}

</style>